import React, { useState, useEffect, useRef, useLayoutEffect } from 'react';
import echarts from 'echarts';

const Graph = () => {
  const myChart = useRef();
  useEffect(() => {
    myChart.current = echarts.init(document.getElementById('chart-Graph'));
    setOption();
  }, []);

  // const data = [
  // 	[2, 0],
  // 	[8, 0]
  // ];
  const start = 0;
  const end = 1;
  function func(x) {
    const diff = end - start;
    return Math.sin((Math.PI / diff) * (x - start));
  }
  function renderData() {
    let data = [];
    for (let i = start; i <= end; i += 0.1) {
      console.log(i);
      data.push([i, func(i)]);
    }
    // console.log('data~~~~~:' ,data);
    return data;
  }

  function setOption() {
    const options = {
      tooltip: {},
      animationDurationUpdate: 1500,
      animationEasingUpdate: 'quinticInOut',
      animation: false,

      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['海昌路', '西博城', '红石公园', '兴隆胡', '科学城'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          type: 'graph',
          layout: 'none',
          symbolSize: 50,
          symbol: 'pin',
          roam: false,
          coordinateSystem: 'cartesian2d',
          label: {
            show: true,
          },
          edgeSymbol: ['none', 'line'],
          edgeSymbolSize: 1,
          edgeLabel: {
            show: false,
            fontSize: 20,
          },
          itemStyle: {
            color: 'rgb(128, 128, 128)',
            opacity: 1,
          },
          data: [
            {
              name: '海昌路',
              x: 0,
              y: 0,
              value: 0,
            },
            {
              name: '红石公园',
              x: 0,
              y: 0,
              value: 0,
            },
            {
              name: '红石',
              x: 0,
              y: 0,
              value: 0,
            },
          ],
          links: [
            {
              source: 0,
              target: 2,
              symbolSize: [20, 20],
              label: {
                show: false,
              },
              lineStyle: {
                width: 2,
                curveness: 0.2,
              },
            },
            {
              source: 0,
              target: 1,
              symbolSize: [20, 20],
              label: {
                show: false,
              },
              lineStyle: {
                width: 2,
                curveness: 0.2,
              },
            },
          ],
          lineStyle: {
            opacity: 0.9,
            width: 2,
            curveness: 0,
          },
        },
      ],
    };
    myChart.current.setOption(options);
  }

  return (
    <div style={{ margin: '0 auto' }}>
      <h2>自定义图表</h2>
      <div
        id="chart-Graph"
        style={{ height: '500px', width: '800px', margin: '0 auto' }}
      />
    </div>
  );
};
export default Graph;
